<template>
  <view>
    <view class="artworks-container">
      <view class="artworks-container-top">
        <view class="artworks-container-top-left">
          <view
            v-for="(item, index) in selectShowTypeList"
            :key="index"
            class="module-item"
            :class="{
              'active-item': currentShowType === index
            }"
            @click="handleShowType(index)">{{ item.name }}</view>
        </view>
        <view class="artworks-container-top-center">
          <u-icon name="search" color="#56d39d" size="32"></u-icon>
          <input
            v-model="artworks_title"
            class="search-input"
            type="text"
            :show-confirmbar="true"
            placeholder="搜索"
            @confirm="getArtworksListByTitle">
        </view>
        <view class="artworks-container-top-right" @click="showSelectSortType = true">
          <u-icon name="grid" color="#56d39d" size="28"></u-icon>
          <text>排序</text>
        </view>
      </view>
      <!-- 分类 -->
      <view v-if="artworksTypeAllListData && artworksTypeAllListData.length > 0 && currentShowType === 0" class="tabs-container">
        <u-tabs
          :list="artworksTypeAllListData"
          :current="tabsCurrent"
          inactive-color="#888"
          active-color="#56d39d"
          :gutter="24"
          font-size="28"
          bg-color="transparent"
          class="tabs-content"
          name="category_name"
          :is-scroll="true"
          @change="tabsChange"></u-tabs>
      </view>

      <!-- 作品标签 -->
      <view v-if="artworksLabelList && artworksLabelList.length > 0 && currentShowType === 0 && currentShowType === 0" class="cate-container">
        <u-tabs
          name="label_name"
          class="cate_count"
          inactive-color="#172B4D"
          :list="artworksLabelList"
          :is-scroll="true"
          :current="currentArtworksLabelTab"
          bg-color="transparent"
          active-color="#56d39d"
          gutter="24"
          height="40"
          font-size="24"
          :duration="0"
          :show-bar="false"
          :active-item-style="{
            'background': '#e0eefc',
            'border-radius': '20rpx',
            'height': '40rpx',
            'line-height': '40rpx',
          }"
          @change="handleTab"></u-tabs>
      </view>

      <!-- 作品模式 -->
      <block v-if="currentShowType === 0 && artworksTypeAllListData && artworksTypeAllListData.length > 1">
        <!-- 作品 -->
        <view class="artworks-list-container">
          <!-- 工具玩法 -->
          <ToolCellList
            v-if="artworksTypeAllListData[tabsCurrent].id === 5"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            is-artworks="1"
            show-make="1"
            @handleCheckBox="handleCheckBox"
            @handleToolItem="handleToolItem"/>
          <!-- 全部 -->
          <MakeAllArtworksList
            v-if="artworksTypeAllListData[tabsCurrent].id !== 5"
            :artworks-list="artworksList"
            :is-batch="isBatch"
            :show-op="true"
            @handleCheckBox="handleCheckBox"
            @handleArtworks="handleArtworks"
            @handleEditPrice="handleEditPrice"
            @handleSetTitle="handleSetTitle"
            @handleGoHome="handleToolItem"/>
          <!-- 提示上传 -->
          <u-empty v-if="artworksList.length === 0" text="没有作品数据，点击下方进行添加" mode="data" style="margin-bottom: 100rpx"></u-empty>
          <!-- 提示没有数据 -->
          <u-empty v-else-if="artworksList.length > 0" text="没有更多的数据啦~" mode="data" style="margin-bottom: 100rpx"></u-empty>
        </view>
      </block>
      <!-- 专辑模式 -->
      <block v-else>
        <MakeAlbumList
          :album-list="arthorAlbumList"
          @editAlbumSuccess="editAlbumSuccess"
          :artworks-type-all-list-data="artworksTypeAllListData">
        </MakeAlbumList>
      </block>
    </view>
    <!-- 操作栏 -->
    <view class="bottom-main">
      <view v-if="currentShowType === 0" class="bottom-view">
        <block v-if="!isBatch">
          <view class="bottom-view-button bottom-view-button-before" @click="isBatch = true">
            <u-icon name="edit-pen" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">批量操作</text>
          </view>
          <view class="bottom-view-button bottom-view-button-before">
            <view class="play-container">
              <view @click="showAddTool = !showAddTool" :class="{
                'selectToole': showAddTool
              }">
                <u-icon name="plus" color="#56d39d" size="28"></u-icon>
                <text class="bottom-view-button-text">添加玩法</text>
              </view>
              <!--添加玩法 -->
              <view v-if="showAddTool" class="add-children">
                <view class="children-content">
                  <view
                    class="children-item"
                    @click="handleAddMakeTemplate">
                    <text>图文模板</text>
                    <image
                      src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01rhxlGU2BzNPcE0oLh_!!1888948409.png"
                      mode="scaleToFill"
                      class="new-icon"
                    />
                  </view>
                  <view class="children-item" @click="goPublishTool">工具玩法</view>
                </view>
              </view>
              <!--添加玩法 -->
            </view>
            <image class="new-icon" src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN019lZyjw2BzNPiUfVxu_!!1888948409.png"></image>
          </view>
          <view class="bottom-view-button bottom-view-button-margin0" @click="goPublishArtworks()">
            <u-icon name="photo" color="#56d39d" size="28"></u-icon>
            <text class="bottom-view-button-text">上传作品</text>
          </view>
        </block>
        <block v-else>
          <view class="bottom-view-button bottom-view-button-padding bottom-view-button-before" @click="isBatch = false">
            <text class="huiju-iconfont huiju-icon-fanhui1"></text>
            <text class="bottom-view-button-text">退出</text>
          </view>
          <view @click="handleBatchUpdateArtworks('is_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-zhiding"></text>
            <text class="bottom-view-button-text">置顶</text>
          </view>
          <view @click="handleBatchUpdateArtworks('cancel_top')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-quxiaozhiding"></text>
            <text class="bottom-view-button-text">取消置顶</text>
          </view>
          <view @click="handleBatchUpdateArtworks('delete')" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-shanchu"></text>
            <text class="bottom-view-button-text">删除</text>
          </view>
          <view @click="goSort()" class="bottom-view-button bottom-view-button-padding bottom-view-button-before">
            <text class="huiju-iconfont huiju-icon-paixu1"></text>
            <text class="bottom-view-button-text">排序</text>
          </view>
          <view @click="goMoveArtworks()" class="bottom-view-button bottom-view-button-padding bottom-view-button-margin0">
            <text class="huiju-iconfont huiju-icon-yidong-xuanzhong-12"></text>
            <text class="bottom-view-button-text">移动</text>
          </view>
        </block>
      </view>
      <view v-if="currentShowType === 1" class="bottom-view">
        <view @click="handleCreateArtworksAlbum()" class="bottom-view-button bottom-view-button-before">
          <text class="huiju-iconfont huiju-icon-ico_classify_unfold"></text>
          <text class="bottom-view-button-text">创建专辑</text>
        </view>
        <view class="bottom-view-button bottom-view-button-before">
          <view class="play-container">
            <view @click="showAddTool = !showAddTool" :class="{
              'selectToole': showAddTool
            }">
              <u-icon name="plus" color="#56d39d" size="28"></u-icon>
              <text class="bottom-view-button-text">添加玩法</text>
            </view>
            <!--添加玩法 -->
            <view v-if="showAddTool" class="add-children">
              <view class="children-content">
                <view
                  class="children-item"
                  @click="handleAddMakeTemplate">
                  <text>图文模板</text>
                  <image
                    src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01rhxlGU2BzNPcE0oLh_!!1888948409.png"
                    mode="scaleToFill"
                    class="new-icon"
                  />
                </view>
                <view class="children-item" @click="goPublishTool">工具玩法</view>
              </view>
            </view>
            <!--添加玩法 -->
          </view>
          <image class="new-icon" src="https://img.alicdn.com/imgextra/i2/1888948409/O1CN019lZyjw2BzNPiUfVxu_!!1888948409.png"></image>
        </view>
        <view @click="goAlbumSort()" class="bottom-view-button bottom-view-button-margin0">
          <text class="huiju-iconfont huiju-icon-paixu1"></text>
          <text class="bottom-view-button-text">专辑排序</text>
        </view>
      </view>
    </view>

    <!-- 设置排序 -->
    <u-modal
      v-model="showSelectSortType"
      :zoom="false"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true">
      <view class="select-sort-container">
        <view class="title_">请选择展示模式</view>
        <view v-if="author.authorList && author.authorList.length > 0" class="select-sort-content">
          <view class="select-sort-left">
            <view class="applet-title">平台端</view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '1'
              }"
              @click="handleSortType('client_sort', '1')">
              <u-icon name="grid" size="28" class="select-sort-item-icon"></u-icon>
              <text>默认排序</text>
            </view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '2'
              }"
              @click="handleSortType('client_sort', '2')">
              <u-icon name="calendar" size="28" class="select-sort-item-icon"></u-icon>
              <text>日期排序</text>
            </view>
            <!-- <view
              class="select-sort-item select-sort-item-bottom0"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].client_sort === '3'
              }"
              @click="handleSortType('client_sort', '3')">
              <text class="huiju-iconfont huiju-icon-paixu1 select-sort-item-icon"></text>
              <text>智能排序</text>
            </view> -->
          </view>
          <view class="select-sort-right">
            <view class="applet-title">小程序端</view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '1'
              }"
              @click="handleSortType('mini_sort', '1')">
              <u-icon name="grid" size="28" class="select-sort-item-icon"></u-icon>
              <text>默认排序</text>
            </view>
            <view
              class="select-sort-item"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '2'
              }"
              @click="handleSortType('mini_sort', '2')">
              <u-icon name="calendar" size="28" class="select-sort-item-icon"></u-icon>
              <text>日期排序</text>
            </view>
            <!-- <view
              class="select-sort-item select-sort-item-bottom0"
              :class="{
                'select-sort-active': author.authorList[author.authorCurrent].mini_sort === '3'
              }"
              @click="handleSortType('mini_sort', '3')">
              <text class="huiju-iconfont huiju-icon-paixu1 select-sort-item-icon"></text>
              <text>智能排序</text>
            </view> -->
          </view>
        </view>
        <!-- 提示 -->
        <view class="select-sort-tips">
          默认排序：置顶&gt;最新上传&gt;自定义排序
          <br>
          日期排序：素材按上传时间自动排序归类
          <br>
          智能排序：素材按当日下载量自动排序，置顶&gt;当日下载量&gt;自定义排序&gt;最新上传
        </view>
      </view>
    </u-modal>
    <!-- 获取免广告码 -->
    <u-modal
      v-model="showToolTips"
      :zoom="false"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true">
      <view class="tool-container">
        <view class="tool-tip-title">我要推广</view>
        <!-- 教程视频 -->
        <view v-if="playVideo" class="video-view">
          <video
            :src="playVideo"
            :webkit-playsinline="true"
            :danmu-btn="false"
            :auto-play="true"
            poster="https://img.alicdn.com/imgextra/i3/1888948409/O1CN018LIsLB2BzNSdGcUQA_!!1888948409.jpg"
            controls
            object-fit="contain"
            class="video-guide">
          </video>
        </view>
        <view class="tool-content">
          <!-- 按钮 -->
          <view class="tool-btn" @click="getDouYinQrCode">
            <u-icon name="grid" color="#fff" size="32" style="margin-right: 8rpx;"></u-icon>
            获取免广告体验码
          </view>
          <view class="tool-qrcode">
            <image v-if="!douyinQrcode" class="qrcode-image" src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN016Bsl3P2BzNSdH5Hya_!!1888948409.png"></image>
            <block v-else>
              <image class="qrcode-image" :src="douyinQrcode"></image>
              <view class="save-tip">长按保存免广告体验码</view>
            </block>
          </view>
        </view>
        <view class="close-btn" @click="showToolTips = false">
          <u-icon name="close" color="#fff" size="38" style="margin-right: 8rpx;"></u-icon>
        </view>
        <canvas canvas-id="qrcode" style="width: 800rpx;height: 800rpx; position: absolute; top: -2000rpx;" />
      </view>
    </u-modal>
    <!-- 选择口令 -->
    <u-select
      v-model="codeInfo.showSelectCode"
      :list="codeInfo.codeList"
      confirm-color="#56d39d"
      value-name="code"
      label-name="code"
      @confirm="confirmCode"></u-select>

    <!-- 创建专辑 -->
    <CreateArtworksAlbum
      :popup-show="createAlbum.popupShow"
      :popup-title="createAlbum.popupTitle"
      :album-info="createAlbum.albumInfo"
      @close="closeCreateArtworksAlbum"
      @success="getAllAlbumByAuthorId"></CreateArtworksAlbum>
    
    <view class="label-container">
      <!-- 设置价格 -->
      <u-popup
        v-model="shwoEditPrice"
        border-radius="16" 
        mode="center"
        width="640rpx">
        <view v-if="currentArtworksInfo" class="label-content">
          <view class="label-title">修改价格</view>
          <view class="price-container">
            <image
              :src="currentArtworksInfo.cover_url"
              mode="aspectFill"
              class="left-image"
            />
            <view class="right-container">
              <view class="label-input-container">
                <view class="label-name">默认价格</view>
                <view class="label-input-content">
                  <input v-model="currentArtworksInfo.price" :disabled="true" class="label-input" type="digit" placeholder="请输入价格">
                </view>
              </view>
              <view class="label-input-container label-input-container2">
                <view class="label-name">自定价格</view>
                <view class="label-input-content">
                  <input v-model="artworks_price" class="label-input label-input2" type="digit" placeholder="请输入价格">
                </view>
              </view>
            </view>
          </view>
          <view class="footer-container">
            <view class="btn cancel-btn" @click="shwoEditPrice = false">取消</view>
            <view class="btn" @click="sumbitArtworksInfo">确定</view>
          </view>
        </view>
      </u-popup>

      <!-- 设置搜索标题 -->
      <u-popup
        v-model="shwoEditTitle"
        border-radius="16" 
        mode="center"
        width="640rpx">
        <view v-if="currentArtworksInfo" class="label-content">
          <view class="label-title label-keywords">
            <view>添加搜索词</view>
            <view class="add-title-keywords" @click="handleAddTitleKeywords">
              <u-icon name="edit-pen" color="#888" size="24"></u-icon>
              <text>新建搜索词</text>
            </view>
          </view>
          <view class="price-container">
            <image
              :src="currentArtworksInfo.cover_url"
              mode="aspectFill"
              class="left-image"
            />
            <view class="right-container">
              <view
                v-for="(item, index) in artworks_title_list"
                :key="index"
                class="label-input-container"
                :class="{
                  'label-input-container2': artworks_title_list.length === (index + 1)
                }">
                <view class="label-name">搜索词{{ index + 1 }}</view>
                <view class="label-input-content">
                  <input v-model="item.title" class="label-input label-input2" type="text" maxlength="6" placeholder="请输入搜索词">
                </view>
                <image
                  src="/static/icon/delete-icon2.png"
                  mode="scaleToFill"
                  class="delete-icon"
                  @click="handleDeleteTitle"
                />
              </view>
              <!-- <view class="label-input-container label-input-container2">
                <view class="label-name">自定价格</view>
                <view class="label-input-content">
                  <input v-model="artworks_price" class="label-input label-input2" type="digit" placeholder="请输入价格">
                </view>
              </view> -->
            </view>
          </view>
          <view class="footer-container">
            <view class="btn cancel-btn" @click="shwoEditTitle = false">取消</view>
            <view class="btn" @click="sumbitArtworksKeywordsInfo">确定</view>
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 推荐资源图标 -->
    <view class="album-list-icon" @click="goAlbumList"></view>
  </view>
</template>

<script>
  import ToolCellList from '@/components/artworksList/toolCellList.vue'; // 文字模板
  import MakeAllArtworksList from '@/components/artworksList/makeAllArtworksList.vue'; // 全部
  import MakeAlbumList from '@/components/albumList/makeAlbumList.vue'; // 专辑列表
  import CreateArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum'; // 创建专辑
  import uQRCode from '@/utils/uqrcode.js'
  import { createDouYinQrCode, makeArtworksTypeAllList } from '@/api/applet';
  import {
    findAllArtworksListByHomePage,
    findAllAlbum,
    batchUpdateArtworks,
    batchDeleteArtworks,
    merchantAuthorEdit,
    codeByUserId,
    artworksLabelList,
    updateArtworks
  } from '@/api/artworks';
  import config from '@/utils/config';
  import { checkText } from '@/utils/index';
  export default {
    components: {
      ToolCellList,
      MakeAllArtworksList,
      MakeAlbumList,
      CreateArtworksAlbum,
    },
    props: {
      authorInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      artworksPriceList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        createAlbum: {
          popupShow: false,
          popupTitle: '创建新专辑',
          albumInfo: {
            name: '', // 专辑名称
            is_top: '', // 是否置顶
            author_id: '', // 主页id
            artworks_type_id: '' // 作品类型
          }
        },
        showToolTips: false,
        author: {},
        showSelectSortType: false, // 选择排序的模式
        playVideo: config.toolPlayVideo,
        isBatch: false, // 是否批量操作
        selectShowTypeList: [{
          name: '作品(0)'
        }, {
          name: '专辑(0)'
        }], // 选择展示类型
        tabsCurrent: 0, // 当前的tabs-index
        artworksList: [], // 作品列表
        pageNum: 1,
        showNoMoreFlag: false,
        loadingList: true,
        arthorAlbumList: [], // 达人专辑列表
        currentShowType: 0, // 显示的模式类型
        douyinQrcode: '', // 抖音二维码
        currentToolId: '', // 当前激活的工具
        codeInfo: {
          codeList: [],
          showSelect: false,
        },
        artworksTypeAllListData: [],
        showAddTool: false,
        artworksLabelList: [], // 当前作品类型的分类
        currentArtworksLabelTab: 0,
        artworks_title: '', // 搜索标题
        shwoEditPrice: false, // 显示设置价格
        artworks_price: 0, // 价格
        currentArtworksInfo: null, // 当前点击的商品
        shwoEditTitle: false, // 显示设置标题
        artworks_title_list: [] // 搜索词列表1
      }
    },
    watch: {
      authorInfo: {
        deep: true,
        immediate: true,
        handler(val) {
          this.author = val;
          this.onChangeAuthorHome();
        }
      },
      artworksPriceList: {
        immediate: true,
        handler(val) {
          console.log(val)
        }
      }
    },
    created() {
      this.getArtworksTypeAllListData();
    },
    methods: {
      goAlbumList() {
        uni.navigateTo({
          url: '/pages/commonAlbumPublish/list?author_id=' + this.author.authorList[this.author.authorCurrent].id
        })
      },
      // 删除标题关键词
      handleDeleteTitle(index) {
        this.artworks_title_list.splice(index, 1);
      },

      // 添加标题关键词
      handleAddTitleKeywords() {
        let artworks_title_list = this.artworks_title_list;
        if (artworks_title_list.length < 6) {
          this.artworks_title_list.push({
            title: ''
          });
        } else {
          uni.showToast({
            title: '最多添加6个关键词',
            icon: 'none',
          });
        }
      },

      // 确定添加标题
      async sumbitArtworksKeywordsInfo() {
        let currentArtworksInfo = this.currentArtworksInfo;
        let artworks_title_list = this.artworks_title_list;
        let title = '';
        let i = 1;
        for (const item of artworks_title_list) {
          if (!item.title) {
            uni.showToast({
              title: `请输入关键词${i}`,
              icon: 'none',
            });
            return;
          } else {
            title += `${item.title}/`
          }
          i = i + 1;
        }
        const flag = await checkText(title.substring(0, title.length - 1));
        if (flag) {
          this.updateArtworksInfo({
            id: currentArtworksInfo.id,
            title: title.substring(0, title.length - 1)
          }, 'title');
        }
      },

      // 点击设置标题
      handleSetTitle(itemData) {
        this.currentArtworksInfo = itemData;
        let titleList = itemData.title ? itemData.title.split('/') : [];
        let artworksTitleList = [];
        if (titleList && titleList.length > 0) {
          titleList.forEach(item => {
            artworksTitleList.push({
              title: item
            })
          });
        } else {
          artworksTitleList.push({
            title: ''
          })
        }
        this.artworks_title_list = artworksTitleList;
        this.shwoEditTitle = true;
      },

      // 确定修改商品价格
      sumbitArtworksInfo() {
        let currentArtworksInfo = this.currentArtworksInfo;
        let price = parseFloat(this.artworks_price);
        let artworksPrice = this.artworksPriceList.filter(item => item.id == currentArtworksInfo.cate_id)[0].min_price;
        if (price > 0) {
          if (price >= artworksPrice) {
            this.updateArtworksInfo({
              id: currentArtworksInfo.id,
              price: parseFloat(price || 0).toFixed(2)
            }, 'price');
          } else {
            uni.showToast({
              title: `最低价格为${artworksPrice}元`,
              icon: 'none',
            })
          }
        } else {
          uni.showToast({
            title: '请输入正确的自定义价格',
            icon: 'none',
          })
        }
      },

      // 更新作品信息
      updateArtworksInfo(data, type) {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        updateArtworks(data).then(result => {
          uni.hideLoading();
          if (result && result.code === 200) {
            if (type === 'price') {
              let artworksList = this.artworksList;
              artworksList.forEach(item => {
                item.show_op = false;
                if (item.id == data.id) {
                  item.price = data.price;
                }
              });
              this.shwoEditPrice = false;
            } else if (type === 'title') {
              let artworksList = this.artworksList;
              artworksList.forEach(item => {
                item.show_op = false;
                if (item.id == data.id) {
                  item.title = data.title;
                }
              });
              this.shwoEditTitle = false;
            }
            uni.showToast({
              title: '设置成功',
              icon: 'none',
            })
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 修改商品价格
      handleEditPrice(itemData) {
        if (itemData.cate_id == '5' || (itemData.template_id && itemData.tool_id)) {
          this.setPublicArtworksPrice(itemData);
        } else {
          this.shwoEditPrice = true;
          this.currentArtworksInfo = itemData;
          this.artworks_price = itemData.price;
        }
      },

      // 设置价格
      setPublicArtworksPrice(itemData) {
        uni.navigateTo({
          url: `/pages/artworks/setPrice?author_id=${itemData.author_id}`
        })
      },

      // 获取作品标签列表
      getArtworksLabelList() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const cate_id = this.artworksTypeAllListData && this.artworksTypeAllListData.length > 0 ? this.artworksTypeAllListData[this.tabsCurrent].id : ''; // 类型id
        artworksLabelList({
          author_id: author_id,
          cate_id: cate_id,
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            this.artworksLabelList = [
              ...[{ label_name: '全部', id: '' }],
              ...list
            ];
          } else {
            this.artworksLabelList = [];
          }
        })
      },

      // 监听主页的变化
      onChangeAuthorHome() {
        this.pageNum = 1;
        this.artworksList = [];
        if (this.currentShowType === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
      },

      // 作品分类
      getArtworksTypeAllListData() {
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            this.artworksTypeAllListData = [
              ...[{ category_name: '全部', id: '' }],
              ...result.data
            ];
            this.onPageReachBottom();
          }
        });
      },

      // 点击修改模式
      handleSortType(updateType, sortType) {
        let params = {};
        if (updateType === 'client_sort') {
          params = {
            id: this.author.authorList[this.author.authorCurrent].id,
            'client_sort': sortType
          }
        } else if (updateType === 'mini_sort') {
          params = {
            id: this.author.authorList[this.author.authorCurrent].id,
            'mini_sort': sortType
          }
        }
        uni.showToast({
          title: '设置中...',
          icon: 'loading',
          duration: 5 * 1000
        })
        merchantAuthorEdit(params).then(result => {
          uni.hideToast();
          if (result && result.code === 200) {
            this.showSelectSortType = false;
            this.$emit('onChangeAuthorHomeInfo');
            // this.getAuthorInfoByUserId();
          }
        })
      },

      // 点击置顶操作 is_top 置顶 cancel_top取消置顶
      handleBatchUpdateArtworks(batchType) {
        const artworksList = this.artworksList;
        this.pageNum = 1;
        const flag = artworksList.some(item => {
          return item.checked
        })
        if (!flag) {
          uni.showToast({
            title: '请选择，在操作',
            icon: 'none'
          })
          return;
        }
        const ids = []; // id集合
        artworksList.forEach(item => {
          if (item.checked) {
            ids.push(item.id);
          } 
        })
        if (batchType === 'is_top') {
          this.batchUpdateArtworksFn(1, ids);
        } else if (batchType === 'cancel_top') {
          this.batchUpdateArtworksFn(0, ids);
        } else if (batchType === 'delete') {
          this.batchDeleteArtworksFn(ids);
        }
      },

      // 置顶操作方法
      batchUpdateArtworksFn(is_top, ids) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchUpdateArtworks({
          is_top,
          ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
          }
        })
      },

      // 批量删除
      batchDeleteArtworksFn(ids) {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        batchDeleteArtworks({
          ids
        }).then(result => {
          if (result && result.code === 200) {
            uni.hideToast();
            this.getAllArtworksList();
          }
        })
      },

      // 根据标题搜索作品
      getArtworksListByTitle() {
        this.pageNum = 1;
        this.artworksList = [];
        this.getAllArtworksList();
      },

      // 根据主页id和作品类型去获取作品列表
      getAllArtworksList(loadMore) {
        if (!loadMore) {
          this.artworksList = [];
        }
        this.showNoMoreFlag = false;
        this.loadingList = true;
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const cate_id = this.artworksTypeAllListData && this.artworksTypeAllListData.length > 0 ? this.artworksTypeAllListData[this.tabsCurrent].id : ''; // 类型id
        const label_id = this.artworksLabelList && this.artworksLabelList.length > 0 ? this.artworksLabelList[this.currentArtworksLabelTab].id : ''; // 类型id
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        findAllArtworksListByHomePage({
          author_id,
          type: 10,
          cate_id,
          label_id,
          title: this.artworks_title,
          pageSize: 36,
          pageNum: this.pageNum,
        }).then(result => {
          uni.hideLoading();
          this.loadingList = false;
          if (result && result.data) {
            // this.selectShowTypeList[0].name = `作品(${result.data.artworksNum})`;
            // this.selectShowTypeList[1].name = `专集(${result.data.albumNum})`;
            this.selectShowTypeList = [{
              name: `作品(${result.data.artworksNum})`
            }, {
              name: `专辑(${result.data.albumNum})`
            }]
            let artworksList = result.data.list;
            artworksList.forEach(item => {
              item.checked = false;
              item.show_op = false;
            });
            this.artworksList = [ ...this.artworksList, ...artworksList ];
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            } else {
              this.pageNum = this.pageNum + 1;
            }
          } else {
            this.artworksList = [];
          }
        }).catch(() => {
          uni.hideLoading();
          this.loadingList = false;
        })
      },

      // 获取创作者全部的专辑和专辑中的作品
      getAllAlbumByAuthorId() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const artworks_cate_id = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        findAllAlbum({ author_id, artworks_type_id: 10, artworks_cate_id }).then(result => {
          uni.hideLoading();
          if (result && result.data) {
            this.selectShowTypeList = [{
              name: `作品(${result.data.artworksNum})`
            }, {
              name: `专辑(${result.data.albumNum})`
            }]
            this.arthorAlbumList = result.data.list;
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 免广告码
      handleToolItem(toolId) {
        console.log(3434,toolId)
        this.currentToolId = toolId.tool_id;
        this.douyinQrcode = '';
        this.showToolTips = true;
      },

      // 获取code信息列表
      getCodeList() {
        codeByUserId().then(result => {
          if (result && result.data && result.data.length > 0) {
            this.codeInfo.codeList = result.data;
          }
        })
      },

      // 前往移动作品
      goMoveArtworks() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = 10; // 类型id
        const cate_id = this.artworksTypeAllListData && this.artworksTypeAllListData.length > 0 ? this.artworksTypeAllListData[this.tabsCurrent].id : ''; // 类型id
        let tabsCurrent = this.tabsCurrent - 1;
        uni.navigateTo({
          url: `/pages/artworks/makeMovePhoto?author_id=${author_id}&type=${type}&tabsCurrent=${tabsCurrent >= 0 ? tabsCurrent : 0}&cate_id=${cate_id}`
        })
      },

      // 选择框
      handleCheckBox(val) {
        this.artworksList[val].checked = !this.artworksList[val].checked;
      },

      // 点击定制作品
      handleArtworks(itemData, index) {
        let artworksList = this.artworksList;
        artworksList.forEach(item => {
          item.show_op = false;
        });
        this.artworksList[index].show_op = !this.artworksList[index].show_op;
      },

      // 获取抖音免广告码
      getDouYinQrCode() {
      console.log('33333333',this.currentToolId)
        const aid = this.author.authorList[this.author.authorCurrent].id;
        const code = this.author.authorList[this.author.authorCurrent].codeInfo.length > 0 ? this.author.authorList[this.author.authorCurrent].codeInfo[0].code : '';
        if (code) {
          uni.showLoading({
            title: '获取中',
            mask: true
          })
          createDouYinQrCode({
            tid: this.currentToolId,
            aid,
            code,
            show_make: '2'
          }).then(result => {
            uni.hideLoading();
            if (result && result.data) {
              uQRCode.make({
                canvasId: 'qrcode',
                componentInstance: this,
                text: result.data,
                size: 400,
                margin: 20,
                backgroundColor: '#ffffff',
                foregroundColor: '#000000',
                fileType: 'jpg',
                errorCorrectLevel: uQRCode.errorCorrectLevel.L,
                success: res => {
                  if (res) {
                    this.douyinQrcode = res;
                  }
                }
              });
            }
          }).catch(() => {
            uni.hideLoading();
          })
        } else {
          uni.showToast({
            title: '请添加口令在操作',
            icon: 'none'
          })
        }
      },

      // 编辑专辑成功
      editAlbumSuccess() {
        this.getAllAlbumByAuthorId();
      },

      // 关闭创建专辑
      closeCreateArtworksAlbum() {
        this.createAlbum.popupShow = false;
      },

      // 点击创建专辑
      handleCreateArtworksAlbum() {
        // if (this.tabsCurrent == 0) {
        //   uni.showToast({
        //     title: '全部不允许创建专辑',
        //     icon: 'none'
        //   });
        //   return;
        // }
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const cate_id = this.artworksTypeAllListData[this.tabsCurrent].id; // 类型id
        this.createAlbum.albumInfo.artworks_type_id = 10;
        this.createAlbum.albumInfo.cate_id = cate_id;
        this.createAlbum.albumInfo.author_id = author_id;
        this.createAlbum.popupShow = true;
      },

      // 添加工具玩法
      goPublishTool() {
        uni.navigateTo({
          // url: `/pages/tool/createTool?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${this.tabsCurrent}`
          url: `/pages/tool/makeToolCategory?author_id=${this.author.authorList[this.author.authorCurrent].id}&type=10`
        });
        this.showAddTool = false;
      },

      // 添加图文模板
      handleAddMakeTemplate() {
        uni.navigateTo({
          // url: `/pages/tool/createTool?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${this.tabsCurrent}`
          url: `/pages/makeArtworksTemplate/makeArtworksTemplate?author_id=${this.author.authorList[this.author.authorCurrent].id}&type=10`
        });
        this.showAddTool = false;
      },

      // 前往上传作品
      goPublishArtworks() {
        if (this.author.authorList.length > 0) {
          let artworksType = this.artworksTypeAllListData[this.tabsCurrent].id;
          console.log('artworksType',artworksType)
          const currentArtworksTypeIndex = this.tabsCurrent == 0 ? 0 : this.tabsCurrent - 1;
          if (artworksType == 5) {
            uni.navigateTo({
              url: `/pages/tool/makeToolCategory?author_id=${this.author.authorList[this.author.authorCurrent].id}&type=10`
            })
          } else {
            uni.navigateTo({
              url: `/pages/publish/makePublish?author_id=${this.author.authorList[this.author.authorCurrent].id}&currentArtworksType=${currentArtworksTypeIndex}&type=10`
            })
          }
        } else {
          uni.showModal({
            title: '温馨提示',
            content: `先创建主页，才能上传作品哦~`,
            confirmText: '立即创建',
            showCancel: false,
            confirmColor: '#56d39d',
            success: ({ confirm, cancel }) => {
              if (confirm) {
                this.author.authorHomePopupShow = true;
              }
            }
          })
        }
      },

      // 前往排序
      goSort() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = 10; // 类型id
        const client_sort = this.author.authorList[this.author.authorCurrent].client_sort; // 排序类型
        const cate_id = this.artworksTypeAllListData && this.artworksTypeAllListData.length > 0 ? this.artworksTypeAllListData[this.tabsCurrent].id : ''; // 类型id
        if (client_sort != 2) {
          uni.navigateTo({
            url: `/pages/artworks/sort?author_id=${author_id}&type=${type}&cate_id=${cate_id}`
          })
        } else {
          uni.showToast({
            title: '该模式下不支持排序',
            icon: 'none'
          })
        }
      },

      // 前往专辑排序
      goAlbumSort() {
        const author_id = this.author.authorList[this.author.authorCurrent].id; // 主页id
        const type = 10; // 类型id
        uni.navigateTo({
          url: `/pages/artworks/albumSort?author_id=${author_id}&type=${type}`
        })
      },

      // 修改类型
      tabsChange(index) {
        // 滚动条滚动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        this.pageNum = 1;
        this.artworksLabelList = [];
        this.tabsCurrent = index;
        this.getArtworksLabelList();
        if (this.currentShowType === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
        this.$emit('onChangeTabs', index);
      },

      // 点击定制作品标签
      handleTab(index) {
        // 滚动条滚动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        this.pageNum = 1;
        this.currentArtworksLabelTab = index;
        if (this.currentShowType === 0) {
          this.getAllArtworksList();
        }
      },

      // 点击展示类型
      handleShowType(index) {
        this.currentShowType = index;
        this.pageNum = 1;
        if (index === 0) {
          this.getAllArtworksList();
        } else {
          this.getAllAlbumByAuthorId();
        }
      },

      onPageReachBottom() {
        uni.$on('onReachBottom', () => {
          if (!this.showNoMoreFlag && !this.loadingList && this.currentShowType === 0) {
            this.getAllArtworksList(1);
          } else {
            uni.showToast({
              title: '没有更多的数据啦！',
              icon: 'none'
            })
          }
        })
      },
    },
    beforeDestroy() {
      console.log('销毁组件定制')
      uni.$off('onReachBottom', () => {
        console.log('异常成功onReachBottom')
      });
    },
  }
</script>

<style lang="scss" scoped>
  .artworks-container{
    padding: 32rpx 0 40rpx 0;
    min-height: 80vh;
    margin-top: -24rpx;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;

    &-top{
      padding: 0 32rpx 30rpx 32rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #eaeaea;

      &-left{
        width: 280rpx;
        height: 60rpx;
        border-radius: 8rpx;
        background-color: #e0eefc;
        display: flex;
        align-items: center;
        overflow: hidden;

        .module-item{
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          flex: 1;
          color: #666;
          border-radius: 8rpx;
        }

        .active-item{
          background-color: $uni-color-primary;
          color: #fff;
        }
      }

      &-right{
        width: 120rpx;
        height: 60rpx;
        background-color: #e0eefc;
        border-radius: 8rpx;
        border: 2rpx solid $uni-color-primary;
        text-align: center;
        line-height: 56rpx;
        color: $uni-color-primary;
      }

      &-center{
        flex: 1;
        background-color: #e0eefc;
        margin-left: 24rpx;
        margin-right: 24rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        padding: 0 12rpx;

        .search-input{
          padding-left: 12rpx;
          font-size: 28rpx;
          color: $uni-color-primary;
        }
      }
    }

    .tabs-container{
      padding: 0 24rpx 12rpx 0;
    }
  }

  .artworks-list-container{
    padding: 0 32rpx;
  }

  .bottom-main{
    position: fixed;
    bottom: calc(var(--window-bottom) + 32rpx);
    z-index: 20;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 2;

    .bottom-view{
      display: flex;
      justify-content: center;
      min-width: 400rpx;
      padding: 24rpx 30rpx;
      background: #fff;
      border: 2rpx solid $uni-color-primary;
      border-radius: 92rpx;
      box-shadow: 0 0 10rpx 2px rgba(243, 247, 251, .5);

      &-button{
        color: $uni-color-primary;
        font-size: 24rpx;
        position: relative;
        padding-right: 34rpx;
        margin-right: 34rpx;
        white-space: nowrap;
        position: relative;

        &-text{
          color: $uni-color-primary;
          padding-left: 6rpx;
        }

        .new-icon{
          width: 48rpx;
          height: 21rpx;
          position: absolute;
          right: 10rpx;
          top: -18rpx;
        }
      }

      &-button-before{
        &::before{
          content: "";
          position: absolute;
          right: 0;
          width: 2rpx;
          height: 32rpx;
          background: #e9e9e9;
        }
      }

      &-button-padding{
        padding-right: 16rpx;
        margin-right: 16rpx;
      }

      &-button-margin0{
        margin-right: 0;
        padding-right: 0;
      }

      .play-container{
        position: relative;
      }

      .add-children{
        width: 320rpx;
        // height: auto;
        min-height: 200rpx;
        height: 294rpx;
        background-image: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN0136vddd2BzNPVILix0_!!1888948409.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: -26rpx;
        z-index: -1;
        -webkit-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        padding-top: 42rpx;
      }

      .children-content{
        display: flex;
        flex-wrap: wrap;
        padding: 12rpx 32rpx;

        .children-item{
          width: 100%;
          font-size: 28rpx;
          font-weight: bold;
          height: 68rpx;
          line-height: 68rpx;
          background-color: #e0eefc;
          border-radius: 34rpx;
          text-align: center;
          position: relative;

          .new-icon{
            width: 48rpx;
            height: 48rpx;
            position: absolute;
            top: -8rpx;
            right: 20rpx;
          }
        }

        .children-item:nth-child(1){
          margin-bottom: 24rpx;
        }
      }
    }
  }

  .select-sort-container{
    padding: 32rpx;

    .title_{
      font-size: 38rpx;
      font-weight: 700;
      text-align: center;
      margin-bottom: 32rpx;
    }

    .select-sort-content{
      display: flex;
      text-align: center;

      .select-sort-left{
        flex: 1;
        padding: 32rpx 24rpx;
        background-color: #e0eefc;
      }

      .select-sort-right{
        flex: 1;
        padding: 32rpx 24rpx;
        background-color: #fbf7f6;
      }

      .applet-title{
        margin-bottom: 32rpx;
        font-size: 32rpx;
      }

      .select-sort-item{
        margin-bottom: 32rpx;
        padding: 24rpx;
        border: 2rpx solid #ececec;
        border-radius: 16rpx;
        background-color: #fff;
        font-size: 28rpx;

        .select-sort-item-icon{
          margin-right: 6rpx;
        }
      }

      .select-sort-active{
        background: $uni-color-primary;
        color: #fff;
      }

      .select-sort-item-bottom0{
        margin-bottom: 0;
      }
    }
    .select-sort-tips{
      font-size: 24rpx;
      padding-top: 32rpx;
      color: #888;
      line-height: 40rpx;
    }
  }

  .tool-container{
    position: relative;

    .tool-tip-title{
      text-align: center;
      font-size: 32rpx;
      color: $uni-color-primary;
      padding: 48rpx 0;
      font-weight: bold;
      background: linear-gradient(to bottom, #babbf8, #ffffff);
    }

    .tool-content{
      padding: 32rpx;
      border: 2rpx solid #ececec;
      border-radius: 16rpx;
      margin: 0 32rpx 32rpx;
    }

    .tool-btn{
      color: #fff;
      background-color: $uni-color-primary;
      text-align: center;
      padding: 16rpx 0;
      border-radius: 16rpx;
      margin-bottom: 32rpx;
    }

    .tool-qrcode{
      padding: 32rpx;
      border: 2rpx solid #ececec;
      border-radius: 16rpx;
    }

    .save-tip{
      font-size: 28rpx;
      padding-top: 24rpx;
      text-align: center;
      color: #333;
    }

    .qrcode-image{
      width: 400rpx;
      height: 400rpx;
      display: block;
      margin: auto;
    }

    .close-btn{
      position: absolute;
      top: 24rpx;
      right: 24rpx;
    }

    .video-view{
      padding: 0 32rpx;

      .video-guide{
        width: 100%;
        height: 250rpx;
        border-radius: 16rpx;
      }
    }
  }

  .cate-container{
    padding: 0 24rpx 12rpx 24rpx;
  }

  .selectToole{
    opacity: .5;
  }

  .label-container ::v-deep .u-mode-center-box{
    background-color: transparent;
  }

  .label-content{
    padding: 32rpx;
    background-color: #fff;

    .label-title{
      font-size: 38rpx;
      color: #172B4D;
      text-align: center;
      font-weight: bold;
      margin-bottom: 42rpx;
    }

    .label-keywords{
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .add-title-keywords{
        font-size: 24rpx;
        color: #888;
      }
    }

    .price-container{
      display: flex;
      align-items: center;
      padding-bottom: 42rpx;

      .right-container{
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        margin-left: 32rpx;
      }

      .left-image{
        border-radius: 16rpx;
        width: 160rpx;
        height: 160rpx;
      }
    }

    .label-input-container{
      display: flex;
      align-items: center;
      margin-bottom: 42rpx;
      background: #f5f5f5;
      border-radius: 16rpx;
      padding: 0 24rpx;
      position: relative;

      .label-name{
        font-size: 28rpx;
        color: #172B4D;
        margin-right: 32rpx;
      }

      .label-input-content{
        padding: 24rpx 0;
        flex: 1;
        display: flex;
        font-weight: bold;
        font-size: 32rpx;
        color: #172B4D;
      }

      .label-input{
        font-size: 32rpx;
      }

      .label-input2{
        font-size: 28rpx;
        padding-right: 24rpx;
      }

      .label-input2{
        color: #ff3636;
      }

      .label-right{
        color: #6c6c7e;
        font-size: 32rpx;
      }

      .delete-icon{
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    .label-input-container2{
      margin-bottom: 0;
    }

    .footer-container{
      display: flex;

      .btn{
        height: 88rpx;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16rpx;
        font-size: 32rpx;
        background: $uni-color-primary;
        color: #fff;
      }

      .cancel-btn{
        margin-right: 32rpx;
        background: #f5f5f5;
        color: #172B4D;
      }
    }
  }
  .album-list-icon{
    width: 120rpx;
    height: 120rpx;
    background: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN01GJeuE22BzNRhpM2ya_!!1888948409.png) no-repeat;
    background-size: cover;
    position: fixed;
    right: 32rpx;
    bottom: 300rpx;
    z-index: 999;
  }
</style>
